<template>
	<view class="storeBox">
		<view class="topMenu">
			<view class="">
				<view class="check" @click="goToPage('store')">
					<view class="">数据</view>
					<view class="hr"></view>
				</view>
			</view>
			<view class="" @click="goToPage('detail')">
				<view class="">结算记录</view>
				<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode=""></image>
			</view>
		</view>
		<view class="topContent">
			<view class="">
				<view class="">收入总额</view>
				<view class="">{{ allTotalInfo.totalIncome }}</view>
			</view>
			<view class="">
				<view class="">口味</view>
				<view :class="{ error: allTotalInfo.flavorScore <= 3.5, success: allTotalInfo.flavorScore > 3.5 }">{{ allTotalInfo.flavorScore }}分</view>
			</view>
			<view class="hr"></view>
			<view class="">
				<view class="">份量</view>
				<view :class="{ error: allTotalInfo.packagingScore <= 3.5, success: allTotalInfo.packagingScore > 3.5 }">{{ allTotalInfo.packagingScore }}分</view>
			</view>
			<view class="hr"></view>
			<view class="">
				<view class="">包装</view>
				<view :class="{ error: allTotalInfo.componentScore <= 3.5, success: allTotalInfo.componentScore > 3.5 }">{{ allTotalInfo.componentScore }}分</view>
			</view>
		</view>
		<view class="dataContent">
			<view class="dataList" v-for="(item, index) in dataList" :key="index">
				<view class="logo" v-if="item.settlementType == '已结算'">已结算</view>
				<view class="w50">
					<view class="">
						日期:
						<text>{{ item.dateStr }}</text>
					</view>
					<view class="">
						今日收入:
						<text>{{ item.todayIncome }}</text>
					</view>
				</view>
				<view class="w100" @click="goToPage('order', item.dateStr)">
					<view class="">
						<view class="">
							有效订单:
							<text>{{ item.effectiveQuantity }}</text>
						</view>
						<image class="arrow" src="https://www.yongshantuan.cn/images/yongshan/arrow.png"></image>
					</view>
				</view>
				<view class="w100" @click="goToPage('afterSales', item.dateStr)">
					<view class="">
						<view class="">
							售后记录:
							<text>{{ item.afterSalesRecords == 0 ? '无' : item.afterSalesRecords }}</text>
						</view>
						<image class="arrow" src="https://www.yongshantuan.cn/images/yongshan/arrow.png"></image>
					</view>
				</view>
				<view class="changeBox">
					<view class="w100" v-for="(childItem, childIndex) in item.hcMerchantSettlementList" :key="index">
						<view class="">
							<view class="">
								账户变动:
								<text>{{ childItem.settlementAmount }}元</text>
							</view>
						</view>
						<view class="">
							<view class="">
								账户变动备注:
								<text>{{ childItem.changeRemarks ? childItem.changeRemarks : '无' }}</text>
							</view>
						</view>
						<view class="" v-if="childItem.picture">
							<view class="">
								变动备注图片:
								<image :src="childItem.picture | getImg"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="2"></CommenFooter>
	</view>
</template>

<script>
import { getStoreData, getTotalData, getMyInfo } from '@/utils/req/api.js';
import CommenFooter from '@/components/footer/footer.vue';
export default {
	components: {
		CommenFooter
	},
	data() {
		return {
			allTotalInfo: {
				totalIncome: ''
			},
			dataList: [
				{
					flavorScore: 0,
					packagingScore: 0,
					componentScore: 0,
					totalIncome: 0
				}
			],
			pageNo: 1,
			pageSize: 10,
			moreDataFlag: false
		};
	},
	onShow() {
    this.pageSize = 10 // 重置
		this.getTotalData();
	},
	mounted() {
		//监控页面滚动
		window.addEventListener('scroll', this.getMoreData, true);
	},
	methods: {
		async getTotalData() {
			this.getStoreData();

			const { data = {} } = await getTotalData();
			this.allTotalInfo = data.result;
		},
		goToPage(type, params) {
			let url;
			switch (type) {
				case 'detail':
					url = './withdrawal';
					break;
				case 'afterSales':
					url = './detailAfterSales?timeBegin=' + params;
					break;
				case 'order':
					url = './detailOrder?timeBegin=' + params;
					break;
			}
			uni.navigateTo({
				url
			});
		},
		async getStoreData() {
			let res = await getStoreData({
				pageNo: 1,
				pageSize: this.pageNo * this.pageSize
			});
			this.dataList = [];
			this.dataList = res.data.result;
		}
	},
	onReachBottom() {
		if (!this.moreDataFlag) {
			if (this.dataList.length != 0 && this.dataList.length % this.pageSize == 0) {
				this.pageNo = this.pageNo + 1;
				this.moreDataFlag = true;
				this.getStoreData();
				setTimeout(() => {
					this.moreDataFlag = false;
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.storeBox {
	background-color: #f5f5f5;
	padding-bottom: 150rpx;
	min-height: 100vh;
}

.topMenu {
	padding: 20rpx 0;
	background-color: #fff;
	padding: 20rpx;
	@include flex(space-between, center);

	> view:nth-child(1) {
		> view {
			margin-right: 30rpx;
			font-size: 40rpx;
			line-height: 56rpx;
			color: rgba(0, 0, 0, 0.35);

			> view:nth-child(2) {
				width: 40rpx;
				height: 8rpx;
				background: #fa690a;
				margin: 0 auto;
				margin-top: 10rpx;
				display: none;
			}
		}

		> .check {
			color: #000;

			> view:nth-child(2) {
				display: block;
			}
		}
	}

	> view:nth-child(2) {
		@include flex();
		font-size: 28rpx;
		line-height: 2;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-left: 10rpx;
			transform: rotate(-90deg);
		}
	}
}

.topContent {
	@include flex();
	flex-wrap: wrap;
	background-color: #fff;
	margin: 20rpx 0;
	padding: 44rpx 0;
	font-size: 30rpx;
	line-height: 1;

	> view {
		@include flex();
		flex-direction: column;

		> view:nth-child(1) {
			color: rgba(0, 0, 0, 0.35);
			margin-bottom: 20rpx;
		}

		> .error {
			color: #ff2e00;
		}

		.success {
			color: #129906;
		}

		&:nth-child(1) {
			width: 30%;

			> view:nth-child(2) {
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		&:nth-child(2),
		&:nth-child(4),
		&:nth-child(6) {
			width: calc((70% - 4rpx) / 3);
		}

		&:nth-child(3),
		&:nth-child(5) {
			width: 2rpx;
			height: 30rpx;
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
}

.dataContent {
	margin-top: 20rpx;
}

.dataList {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 40rpx;
	position: relative;
	.logo {
		width: 120rpx;
		height: 60rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: red;
		text-align: center;
		line-height: 60rpx;
		transform: rotate(-10deg);
		border: 1px solid red;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	> view {
		@include flex();
		// color: rgba(0, 0, 0, 0.55);
		color: #000;
		font-size: 28rpx;
		line-height: 2;

		text {
			color: #000;
			margin-left: 10rpx;
		}
	}

	> .w50 {
		> view {
			width: 50%;
		}
	}

	> .w30 {
		> view {
			width: calc(100% / 3);
		}
	}

	.w100 {
		> view {
			width: 100%;
			@include flex(space-between, center);

			.arrow {
				width: 20rpx;
				height: 20rpx;
				transform: rotate(-90deg);
			}
		}
	}
	.changeBox {
		flex-wrap: wrap;
		.w100 {
			width: 100%;
			> view {
				> view {
					word-break: break-all;
					flex-wrap: wrap;
					display: flex;
					justify-content:flex-start;
					align-items: flex-start;
					> image {
						width: 160rpx;
						height: 160rpx;
						margin-left: 20rpx;
						object-fit: cover;
					}
				}
			}
		}
	}
}
</style>
